<template>
	<view>
		<view class="page-body">
			<form @submit="formSubmit" @reset="formReset">
				<!-- <view class="uni-list"> -->
				<view class="uni-row uni-flex uni-list-cell-navigate uni-navigate-right" @tap="goto()">
					<view class="input-flex-label">
						头像
					</view>
					<view class="uni-list-cell-db">
						<image class="user-avatar" :src="imgUrl"></image>
					</view>
				</view>
				<!-- </view>
				<view class="uni-list"> -->
				<view class="uni-row uni-flex uni-list-cell-navigate" >
					<view class="input-flex-label">
						昵称
					</view>
					<input class="input-flex-text" name="input" v-model="nickname" placeholder="请输入昵称" />
				</view>
				<!-- </view> -->

				<!-- <view class="uni-list"> -->
				<view class="uni-row uni-flex uni-list-cell-navigate">
					<view class="input-flex-label">
						性别
					</view>
					<view class="uni-list-cell-db">
						<radio-group class="radio-group" @change="radioChange">

							<label class="radio" v-for="item in radioItems" :key="item">
								<radio :value="item.value" :checked="item.checked" />{{item.name}}
							</label>
						</radio-group>
					</view>
				</view>
				<!-- </view> -->
				<!-- <view class="uni-list"> -->
				<view class="uni-row uni-flex uni-list-cell-navigate">
					<view class="input-flex-label">
						出生日期
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="birthDate" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input" v-if="birthDate">{{birthDate}}</view>
							<view class="uni-input" v-else>请选择出生日期</view>
						</picker>
					</view>
				</view>
				<!-- </view>
				<view class="uni-list"> -->
				<view class="textarea-flex-label">
					个性宣言
				</view>
				
				<textarea class="textarea-flex-text" name="signature" v-model="signature" placeholder="请输入个性宣言,至少20个字"></textarea>
				
				<!-- </view> -->
				<view class="uni-flex uni-row">
					<button class="btn-submit" formType="submit">提交</button>
					<button type="default" formType="reset">重置</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import {
		getStore,
		setStore
	} from '@/common/util'
	import {
		getUrl
	} from '@/common/oss';
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		addUser
	} from '@/api/ucenter/index'
	export default {
		data() {
			return {
				userLoginId: "",
				partyId: "",
				nickname: "",
				delta: 1,
				signature: "",
				imgUrl: "",
				gender: "",
				birthDate: "",
				radioItems: [{
						name: "男",
						value: "M"
					},
					{
						name: "女",
						value: "F"
					}
				]
			}
		},
		onLoad(e) {
			if (e.typeId == 1) {
				this.loadUserInfo();
			} else {
				this.userLoginId = e.userLoginId;
				this.delta = e.delta
			}
		},
		onBackPress: function(e) {
			var avatar = setStore({
								name: "$user_avatar_url",
								content: "",
								type: 'session'
							})
		},
		onShow: function(e) {
			var avatar = getStore({
				name: "$user_avatar_url"
			})
			console.log(avatar)
			if (avatar !== undefined && avatar !== null && avatar.length > 0) {
				this.imgUrl = avatar
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
			...mapGetters(
				["hasLogin"],
			),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			...mapMutations(
				["SET_USER_INFO",]
			),
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			},
			loadUserInfo() {
				if (this.hasLogin) {
					console.log(JSON.stringify(this.userInfo))
					this.nickname = this.userInfo.nickname
					this.imgUrl = getUrl(this.userInfo.imgUrl)
					console.log(this.imgUrl)
					this.signature = this.userInfo.signature
					this.birthDate = this.userInfo.birthDate
					this.userLoginId = this.userInfo.userLoginId
					this.partyId = this.userInfo.partyId
					for (var i = 0; i < this.radioItems.length; i++) {
						if (this.radioItems[i].value == this.userInfo.gender) {
							this.radioItems[i].checked = true;
						}
					}
				}
			},
			radioChange(e) {
				this.gender = e.detail.value;
			},
			bindDateChange: function(e) {
				this.birthDate = e.target.value

				console.log(this.birthDate)
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			},
			formReset: function(e) {
				console.log("清空数据")
				this.chosen = ''
			},
			goto() {
				console.log("goto....")
				uni.navigateTo({
					url: "/pages/security/crop"
				})
			},
			save() {

				var that = this;
				if (this.hasLogin  == false) {
					addUser({
						userLoginId: this.userLoginId,
						partyId: this.partyId,
						nickname: this.nickname,
						signature: this.signature,
						imgUrl: this.imgUrl,
						gender: this.gender,
						birthDate: this.birthDate,
					}).then(response => {
						if (response.status == 200 && response.rel == true) {
							uni.showModal({
								title: "提示",
								content: "注册成功",
								success: async function() {
									uni.navigateBack({
										delta: that.delta
									})
								}
							})
						} else {
							uni.showModal({
								title: "警告",
								content: "注册失败，请重试"
							})
						}
					}).catch(err => {
						uni.showModal({
							title: "警告",
							content: "注册失败，请重试"
						})
					})
				} else {
					let user = that.userInfo;
					user.userLoginId = this.userLoginId,
					user.partyId = this.partyId,
					user.nickname = this.nickname,
					user.signature = this.signature,
					user.imgUrl = this.imgUrl,
					user.gender = this.gender,
					user.birthDate = this.birthDate,
					
					updateUser(user).then(response => {
						if (response.status == 200 && response.rel == true) {
							this.SET_USER_INFO(user);
							uni.showModal({
								title: "提示",
								content: "信息修改成功",
								success: async function() {
									uni.navigateBack({
										delta: that.delta
									})
								}
							})
							
						} else {
							uni.showModal({
								title: "警告",
								content: "信息修改失败，请重试"
							})
						}
					}).catch(err => {
						uni.showModal({
							title: "警告",
							content: "信息修改失败，请重试"
						})
					})
				}

			},
			uploadImage() {
				//多张图片地址，保存到一个数组当中
				if (this.nickname.length < 0) {
					uni.showModal({
						title: "提示",
						content: "请输入昵称,谢谢"
					})
					return;
				}

				if (this.gender.length < 0) {
					uni.showModal({
						title: "提示",
						content: "请选择性别,谢谢"
					})
					return;
				}

				if (this.imgUrl.length < 0) {
					uni.showModal({
						title: "提示",
						content: "请上传图像，谢谢"
					})
					return;
				}

				var that = this;
				if (this.imgUrl.startsWith("http")) {
					new Promise(function(resolve, reject) {
						qiniuUploader.upload(this.imgUrl, (res) => {
							that.imageUrl = res.key;
							resolve();
						}, (error) => {
							reject('error');
							console.log('error: ' + error);
						}, {
							region: 'SCN', // 华北区
							uptokenURL: getBasicUrl() + "/api/tool/oss/token?expires=" + 3600,
							domain: 'p6urwinfd.bkt.clouddn.com',
							shouldUseQiniuFileName: true
						})


					}).then(response => {
						this.save()
					}).catch(err => {
						uni.showModal({
							title: "提示",
							content: "图片上传失败"
						})
					})
				} else {
					this.save()
				}

			}
		}

	}
</script>

<style>
	/* label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	} */

	.user-avatar {
		width: 90upx;
		height: 90upx;
	}

	.btn-submit {
		background-color: #007aff;
		color: #ffffff;
	}

	.uni-row {
		margin-bottom: 1px;
		padding: 10upx;
		background-color: #fff;
	}


	.list-left {
		padding: 0 24upx;
		width: 200upx;
		
		line-height: 36upx;
		font-size: 16upx;
		color: #333;
		display: block;
	}

	.uni-list-cell-db {
		padding: 0 24upx;
	}

	.uni-text-area {
		width: 526upx;
		height: 400upx;
		border: 1px solid #D8D8D8;
	}
	
	.uni-input-nickname {
	  border-bottom	: 1px solid #D8D8D8;
	}
	
	.input-flex-text {
		flex: 1;
		height: 48upx;
		box-sizing: border-box;
		display: block;
		border: 1px solid #eee !important;
		padding: 0 5upx;
		font-size: 36upx;
		margin: 0;
		width: 550upx;
	}
	.input-flex-label {
		width: 200upx;
		line-height: 48upx;
		font-size: 36upx;
		color: #333;
		display: block;

	}
	.textarea-flex-label {
    padding: 10upx;
	font-size: 36upx;
    color: #323232;
	background-color: #fff;
}
.textarea-flex-text {
	
    height: 200upx;
    border: 1px solid #eee;
    border-radius: 5upx;
    padding: 20upx;
	width: 750upx;
	background-color: #fff;

}
</style>
